<script setup>
	import { ref, computed} from 'vue'

	// 礼物清单
	const goods = ref([
		{id: 1, name: '篮球', num: 1},
		{id: 2, name: '玩具', num: 3},
		{id: 3, name: '书籍', num: 2}
	])

	/* 
		computed 应用场景：
			1. 一个值可以通过原始数据的计算得到
			2. 原来没有这个属性
		注意点
			1. 必须要有放回值，否则就是 undefined
			2. 如果要在 js 中访问，那么就要添加 .value
	*/
	const totalCount = computed(() => {
		// 因为计算属性(totalCount)是由原始数据(goods)得到, 所以可以说 totalCount 的依赖是 goods
		return goods.value.reduce((prev, item) => prev + item.num, 0)
	})
	console.log(totalCount.value);
	
	// 思考： 为什么不能用方法直接返回呢？
	const getTotalCount = () => {
	  return goods.value.reduce((prev, item) => prev + item.num, 0)
	}
</script>


<template>
	<h4>比特人的礼物清单</h4>
	<table>
		<thead>
			<tr>
				<th>名字</th>
				<th>数量</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in goods">
				<td>{{ item.name }}</td>
				<td>{{ item.num }}个</td>
			</tr>
		</tbody>
	</table>
	<!-- 计算属性既可以搭配插入表达式使用， 也可以搭配指令使用 -->
	<p>礼物总数：{{ totalCount }} 个</p>
	<p>礼物总数：<span v-text="totalCount"></span> 个</p>
</template>


<style scoped>
	table {
		border: 1px solid #333;
	}
	table th,
	table td {
		border: 1px solid #333;
		width: 100px;
		text-align: center;
	}
</style>
